<template>
  <div class="page">
    <!-- 顶部搜索、定位 开始 -->
    <!-- <div class="top_info">
                <div class="location" @click="chooseAddress">
                    <span class="city_name">{{ $route.query.city || '深圳' }}</span>
                    <van-icon name="arrow-down" class="arrow" />
                </div>
                <div class="search">
                    <img src="@/assets/images/search.png" alt="">
                    <span title="牙齿矫正哪里好">牙齿矫正哪里好</span>
                </div>
                <div class="msg">
                    <img src="@/assets/images/msg_hot.png" alt="">
                </div>
            </div> -->
    <!-- 顶部搜索、定位 end -->

    <!-- 大图标 开始 -->
    <div class="big_list">
      <div class="cell">
        <nuxt-link to="/inquire/price">
          <div class="img_box">
            <img src="@/assets/images/index_02.png" alt="查价格" />
          </div>
          <div class="name">查价格</div>
        </nuxt-link>
      </div>
      <div class="cell">
        <nuxt-link to="/inquire/certification">
          <div class="img_box">
            <img src="@/assets/images/index_03.png" alt="查资质" />
          </div>
          <div class="name">查资质</div>
        </nuxt-link>
      </div>
      <div class="cell">
        <nuxt-link to="/inquire/case">
          <div class="img_box">
            <img src="@/assets/images/index_01.png" alt="查案例" />
          </div>
          <div class="name">查案例</div>
        </nuxt-link>
      </div>
      <div class="cell">
        <nuxt-link to="/baike/list">
          <div class="img_box">
            <img src="@/assets/images/index_04.png" alt="口腔百科" />
          </div>
          <div class="name">口腔百科</div>
        </nuxt-link>
      </div>
    </div>
    <!-- 大图标 end -->

    <!-- 小图标 开始 -->
    <div class="small_list">
      <div class="scroll-wrapper" ref="scrollBox">
        <div class="scroll-content">
          <nuxt-link to="/hospital" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_01.png" alt="" />
            </div>
            <div class="name">口腔医院</div>
          </nuxt-link>
          <nuxt-link to="/doctor" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_02.png" alt="" />
            </div>
            <div class="name">口腔医生</div>
          </nuxt-link>
          <nuxt-link to="/shop" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_03.png" alt="" />
            </div>
            <div class="name">特惠商城</div>
          </nuxt-link>
          <nuxt-link to="/news/list" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_04.png" alt="" />
            </div>
            <div class="name">最新资讯</div>
          </nuxt-link>
          <nuxt-link to="/questions/list" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_05.png" alt="" />
            </div>
            <div class="name">社区问答</div>
          </nuxt-link>
          <nuxt-link
            to="/report/add"
            class="scroll_item"
            v-if="$cookies.get('token')"
          >
            <div class="img_box">
              <img src="@/assets/images/s_06.png" alt="" />
            </div>
            <div class="name">口腔报告</div>
          </nuxt-link>
          <nuxt-link to="/my/login" class="scroll_item" v-else>
            <div class="img_box">
              <img src="@/assets/images/s_06.png" alt="" />
            </div>
            <div class="name">口腔报告</div>
          </nuxt-link>
          <nuxt-link to="/my/join" class="scroll_item">
            <div class="img_box">
              <img src="@/assets/images/s_07.png" alt="" />
            </div>
            <div class="name">机构入驻</div>
          </nuxt-link>
        </div>
      </div>
      <div class="dot_box">
        <div
          class="cell"
          :style="
            dotIndex == 1
              ? 'width:' + (12 - num) + 'px'
              : 'width:' + (4 + num) + 'px'
          "
        ></div>
        <div
          class="cell"
          :style="
            dotIndex == 2
              ? 'width:' + (12 - num) + 'px'
              : 'width:' + (4 + num) + 'px'
          "
        ></div>
      </div>
    </div>
    <!-- 小图标 end -->

    <!-- banner 开始 -->
    <div class="banner">
      <div class="img_box">
        <van-swipe
          class="banner_swipe"
          :autoplay="3000"
          indicator-color="white"
          v-if="bannerList && bannerList.length"
        >
          <van-swipe-item
            v-for="(item, index) in bannerList"
            :key="`banner_${index}`"
          >
            <li-image
              :src="getBanner(item)"
              :is-preview="false"
              @click.native="goBannerLink(item.jumpLink)"
            />
          </van-swipe-item>
        </van-swipe>
        <img src="@/assets/images/banner.png" alt="" v-else />
        <!-- <li-image :src="getBanner(bannerInfo)" :is-preview="false" v-if="getBanner(bannerInfo)"
          @click.native="goBannerLink"></li-image>
         -->
        <!-- <img src="@/assets/images/banner.png" alt=""> -->
      </div>
    </div>
    <!-- banner end -->

    <!-- tabbar 开始 -->
    <div class="tabbar_box">
      <div
        class="tab"
        :class="menuActive == item.id ? 'tab_active' : ''"
        v-for="(item, index) in menuList"
        :key="index"
        @click="menuEvent(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- tabbar end -->
    <div class="content_box">
      <!-- 医院列表 开始 -->
      <div class="list_box" v-if="menuActive == 1">
        <template v-if="hospitalList && hospitalList.length">
          <hospital
            v-for="(item, index) in hospitalList"
            :key="`hospital_${index}`"
            :info="item"
            :query="{ query: menuActive }"
          ></hospital>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 医院列表 end -->

      <!-- 医生列表 开始 -->
      <div class="list_box" v-if="menuActive == 2">
        <template v-if="doctorList && doctorList.length">
          <doctor
            v-for="(item, index) in doctorList"
            :key="`doctor_${index}`"
            :info="item"
            :query="{ query: menuActive }"
          ></doctor>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 医生列表 end -->

      <!-- 特惠商城 开始 -->
      <div class="goods_list" v-if="menuActive == 3">
        <template v-if="goodsList && goodsList.length">
          <goods
            v-for="(item, index) in goodsList"
            :key="`goods_${index}`"
            :info="item"
            :query="{ query: menuActive }"
          ></goods>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 特惠商城 end -->

      <!-- 社区问答 开始 -->
      <div class="list_box" v-if="menuActive == 4">
        <template v-if="newsList && newsList.length">
          <question
            v-for="(item, index) in newsList"
            :key="`question_${index}`"
            :info="item"
            :query="{ query: menuActive }"
          ></question>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 社区问答 end -->
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import Hospital from "@/components/hospital/index.vue";
import Doctor from "@/components/doctor/index.vue";
import Goods from "@/components/goods/index.vue";
import Question from "@/components/question/index.vue";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_SEARCH,
  GET_DOCTOR_SEARCH,
  GET_GOODS_SEARCH,
  GET_QUESTIONANSWER_SEARCH,
  GET_SEO_SETTING_INFO,
  GET_ADVERTISEMENT_INFO,
} from "@/http/interface";
import { Swipe, SwipeItem } from "vant";
export default {
  components: {
    Hospital,
    Doctor,
    Goods,
    Question,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      scrollBox: "",
      menuList: [
        { name: "口腔医院", id: 1 },
        { name: "口腔医生", id: 2 },
        { name: "特惠商城", id: 3 },
        { name: "社区问答", id: 4 },
      ],
      menuActive: 1,
      value: 3,
      dotIndex: 1,
      num: 0,
      hospitalList: [],
      doctorList: [],
      goodsList: [],
      newsList: [],
      seoInfo: {},
      bannerList: [],
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/home`}
      ]
    };
  },
  watch: {
    $route: {
      handler: function (n) {
        this.getHospital();
      },
      immediate: true,
    },
  },
  created() {},
  async asyncData({ $axios, $cookies }) {
    let city = $cookies.get("city");
    let oParams = { pageNumber: 1, pageSize: 5, homePageShow: 1 };
    console.log(city);
    if (city && city != "全国") {
      oParams.city = city;
    }
    console.log(oParams);
    //let res = await $axios.get(GET_HOSPITAL_SEARCH, { params: oParams });
    let [d, g, n] = await Promise.all([
      //$axios.get(GET_HOSPITAL_SEARCH, { params: oParams }),
      $axios.get(GET_DOCTOR_SEARCH, { params: oParams }),
      $axios.get(GET_GOODS_SEARCH, { params: oParams }),
      $axios.get(GET_QUESTIONANSWER_SEARCH, { params: oParams }),
    ]);
    // let hres = h.data || {};
    let dres = d.data || {};
    let gres = g.data || {};
    let nres = n.data || {};
    // let hospitalList = hres.list || [];
    let doctorList = dres.list || [];
    let goodsList = gres.list || [];
    let newsList = nres.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 0, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    // 获取banner图
    let bes = await $axios.get(GET_ADVERTISEMENT_INFO, {
      params: { position: 2 },
    });
    console.log(bes);
    let bannerList = bes.data || [];

    return {
      //hospitalList,
      doctorList,
      goodsList,
      newsList,
      seoInfo,
      bannerList,
      menuActive: $cookies.get("homeMenuActive") || 1,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化滚动
    init() {
      let _this = this;
      this.scrollBox = new BScroll(this.$refs.scrollBox, {
        scrollX: true,
        probeType: 3,
        click: true,
      });
      this.scrollBox.on("scrollStart", () => {
        _this.dotIndex = 1;
        _this.num = 0;
      });
      this.scrollBox.on("scroll", (position) => {
        if (_this.num < 8) {
          _this.num += 0.2;
        }
      });
      this.scrollBox.on("scrollEnd", () => {
        _this.num = 0;
        _this.dotIndex = 2;
      });
    },

    // tabbar 点击事件
    menuEvent(row) {
      this.menuActive = row.id;
      this.$cookies.set("homeMenuActive", row.id);
    },

    // 页面跳转
    navigateTo(url) {
      this.$router.push({
        path: url,
      });
    },

    // 获取医院列表
    async getHospital() {
      let city = this.$cookies.get("city");
      let query = this.$route.query;
      let scity = query.city || city;
      let oParams = { pageNumber: 1, pageSize: 5, homePageShow: 1 };
      if (scity && scity != "全国") {
        oParams.city = scity;
      }
      let res = await this.$axios.get(GET_HOSPITAL_SEARCH, { params: oParams });
      let obj = res.data || {};
      let hospitalList = obj.list || [];
      this.hospitalList = hospitalList;
    },

    // 获取banner
    getBanner(obj) {
      let arr = obj.uploadMedia || [];
      let _path = arr[0] || "";
      return _path;
    },

    // 点击banner跳转
    goBannerLink(path) {
      window.open(path);
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/home.less";
</style>